<style lang="less" >
@import url(../../css/table.css);
</style>


<template>
  <div class="fm">
    <div class="top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> homepage </el-breadcrumb-item>
        <el-breadcrumb-item>公告列表</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="flex justify-space-between mb-4 flex-wrap gap-4" style="margin-right: 16rem">
        <el-button
          v-for="button in buttons"
          :key="button.text"
          :type="button.type"
          link
          @click="button.method"
          >{{ button.text }}</el-button
        >
      </div>
    </div>
    <!-- <div style="display: flex">
      <div class="icon" @click="updateShow1 = true">添加</div>
      <div class="icon" @click="handleSelectClose">筛选</div>
    </div> -->
    <!-- 筛选 -->
    <div class="select" ref="select">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="公告标题">
              <el-input v-model="formInline.title" placeholder="公告标题" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="formSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="newsdata" style="width: 100%; border-radius: 6rem" @row-click="rowShow">
      <el-table-column fixed prop="title" size="big" label="公告标题" width="300" />
      <el-table-column prop="publishedAt" label="发布日期" width="600" />
      <el-table-column prop="uptime" label="更新时间" width="600" />
      <el-table-column fixed="right" label="操作" width="150" class="cz" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.stop="del(scope.row._id)"
            ><el-icon size="14rem"><Delete /></el-icon
          ></el-button>
          <el-button link type="primary" size="small" @click.stop="modify(scope.row._id)"
            ><el-icon size="14rem"><Edit /></el-icon
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改 -->
    <el-drawer
      v-model="updateShow2"
      title="修改公告"
      :direction="direction"
      size="50%"
      :before-close="handleClose2"
    >
      <UpdateBlog
        @handleDraewr="handleDrawer"
        :filterNew="filterNew"
        :key="filterNew?._id"
      ></UpdateBlog>
    </el-drawer>
    <!-- 添加 -->
    <el-drawer
      v-model="updateShow1"
      title="添加公告"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <UpdateBlog @handleDraewr="handleDrawer"></UpdateBlog>
    </el-drawer>
  </div>
</template>

<script setup>
import { News, delBlog, selectnews } from '@/utils/zyy-axios'
import UpdateBlog from '@/components/news/UpdateBlog.vue'
import { ref, useTemplateRef } from 'vue'
import { ElMessageBox } from 'element-plus'

const updateShow1 = ref(false)
const updateShow2 = ref(false)
const filterNew = ref(false)
const direction = ref('rtl')

const newsdata = ref([])

News().then((res) => {
  newsdata.value = res.data.newsResult
  console.log('thisnews', newsdata.value)
})

const handleDrawer = () => {
  updateShow1.value = false
  updateShow2.value = false
  News().then((res) => {
    newsdata.value = res.data.newsResult
  })
}
const modify = (id) => {
  updateShow2.value = true
  filterNew.value = newsdata.value.find((item) => item._id == id)
  console.log('修改', filterNew.value)
}
const handleClose = (done) => {
  ElMessageBox.confirm('公告还未添加，是否退出?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
// 修改NEWS
const handleClose2 = (done) => {
  ElMessageBox.confirm('公告还未修改，是否退出?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const del = async (id) => {
  await delBlog(id)
  News().then((res) => {
    newsdata.value = res.data.newsResult
  })
  console.log('删除', id)
}

// 筛选
const select = useTemplateRef('select')
const flag = ref(false)
const handleSelectClose = () => {
  flag.value = !flag.value
  if (flag.value) {
    select.value.style.height = '80rem'
    select.value.style.visibility = 'inherit'
    select.value.style.opacity = '1'
  } else {
    select.value.style.height = '0'
    select.value.style.visibility = 'hidden'
    select.value.style.opacity = '0'
  }
}

const formInline = ref({
  title: '',
  au: '',
  phone: '',
})

const formSubmit = () => {
  const { title, au, phone } = formInline.value
  selectnews(title, au, phone).then((res) => {
    newsdata.value = res.data.list
    console.log(res.data.list)

    // total.value = res.data
  })
}

const rowShow = (item) => {
  console.log('点击了', item._id)
}

const buttons = [
  { type: 'primary', text: '添加', method: () => (updateShow1.value = true) },
  { type: 'primary', text: '筛选', method: handleSelectClose },
]
</script>
